<template>
	<div class='orderlist'>
		<div class='head'>
            <p class="title-text">订单列表</p>
       </div>	
       <div class="menu">
       	<tab>
	        <tab-item selected @on-item-click="onItemClick1" class='menu-p' >待取货</tab-item>
	        <tab-item @on-item-click="onItemClick2" class='menu-p'>配送中</tab-item>
	        <tab-item @on-item-click="onItemClick3" class='menu-p'>已完成</tab-item>
      	</tab>
       	<!--<p class="menu-p">待取货</p>
       	<p class="menu-p">配送中</p>
       	<p class="menu-p">已完成</p>-->
       </div>
       <div class="content-box">
        	<div class="content-info">
	        	<div class="info-distance">
	        		<p class="info-far">
	        			<span class="iconfont icon-dingwei"></span><span>距你800米</span>
	        		</p>
	        		<p class="info-to-detail">
	        			<router-link to='/orderdetail'><span>详情</span><span class="iconfont icon-iconfontjiantouyou"></span></router-link>
	        		</p>
	        	</div>
	        	<div class="info">
	        		<p class="info-p"><span class="iconfont icon-yijiesuan"></span>收入&nbsp;&nbsp;8.00元</p>
	        		<p class="info-p"><span class="iconfont icon-jinlingyingcaiwangtubiao74"></span>取货&nbsp;&nbsp;今天11:30</p>
	        		<div class="order-info">
	        			<div class="flex">
	        				<p class="flex-1"><span class='order-info-left'>发货</span><span>清粥小菜</span></p>
	        				<p class="flex-1 howfar">距收货1.5千米</p>
	        				<!--<p class="flex-1 howfar">取货  今天11:30</p>-->
	        			</div>
	        				<span class='order-info-left'></span>
	        				<span class="addr">遂宁市香林南路19号</span>
	        		</p>
	        		</div>
	        	</div>
	        	<p class="done">配送完成</p>
        	</div>
        </div>
        
        <tabbar>
	      <tabbar-item selected link='/home'>
	        <span slot='icon' class="iconfont icon-comiishome"></span>
	        <span slot="label">首页</span>
	      </tabbar-item>
	      
	      <tabbar-item link='/orderlist'>
	        <span slot='icon' class="iconfont icon-liebiao-80"></span>
	        <span slot="label">订单</span>
	      </tabbar-item>
	      
	      <tabbar-item  link="/settlement">
	        <span slot='icon' class="iconfont icon-yijiesuan"></span>
	        <span slot="label">结算</span>
	      </tabbar-item>
	      
	      <tabbar-item link='/personcenter'>
	        <span slot='icon' class="iconfont icon-xinxi"></span>
	        <span slot="label">我的</span>
	      </tabbar-item>
	      
    </tabbar>
        
	</div>
</template>

<script>
import { Tabbar, TabbarItem, Tab, TabItem} from 'vux'
export default {
  components: {
    Tabbar,
    TabbarItem,
    Tab,
    TabItem
  },
  data () {
    return {
      waiting:true,
      distribution:false,
      completed:false,
    }
  },
  methods:{
    onItemClick1 () {
      this.waiting=true
      this.distribution=false
      this.completed=false
    },
    onItemClick2 () {
      this.waiting=false
      this.distribution=true
      this.completed=false
    },
    onItemClick3 () {
      this.waiting=false
      this.distribution=false
      this.completed=true
    },
  }
}
</script>

<style scoped>
	.orderlist{
		margin-bottom: 60px;
	}
	.title-text{
		width: 100%;
		text-align: center;
	}
	.menu{
		display: flex;
		background-color: white;
		border-top: 1px #EBEBEB solid;
		height: 40px;
		line-height: 40px;
	}
	.menu > div{
		flex: 1;
		text-align: center;
		height: 40px;
		line-height: 40px;
		margin: 0px;
		color: #999999;
	}
	.info{
		background-color: white;
	}
	.info-distance{
		display: flex;
		height: 35px;
		padding: 0px 5px 0px 5px;
		border: 1px #ebebeb solid;
	}
	.info-distance > p{
		line-height: 35px;
	}
	.content-info{
		margin-top: 5px;
		
		background-color: white;
	}
	.info-far{
		flex: 1;
	}
	.info-to-detail{
		flex: 1;
		text-align: right;
		color: #23A6F3;
	}
	.order-far{
		display: inline-block;
		margin-left: 15px;
	}
	.icon-dingwei{
		color: #FF900D;
		display: inline-block;
		margin-right: 8px;
		vertical-align: middle;
	}
	.icon-iconfontjiantouyou{
		display: inline-block;
		margin-left: 8px;
		font-size: .8rem;
		vertical-align: middle;
	}
	hr{
		border: .1px #cccccc solid;
	}
	.info-p{
		margin: 0px;
	}
	.info-p > span{
		display: inline-block;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #999999;
		font-size: 1.2rem;
	}
	.info-left > p{
		color: #cccccc;
	}
	.order-info{
		color: #cccccc;
		font-size: .8rem;
		margin-left: 30px;
		line-height: 30px;
	}
	.order-far{
		color:#71B4EB;
	}
	.order-info-left{
		display: inline-block;
		width: 30px;
		margin-right: 10px;
	}
	.buttons{
		display: flex;
	}
	.ignore,.single{
		flex: 1;
		text-align: center;
		color: #cccccc;
		border-top: 1px #ebebeb solid;
		height: 40px;
		line-height: 40px;
		margin: 0px;
	}
	.single{
		color: white;
		background-color: #71B4EB;
	}
	.info-to-detail >a{
		color:#71B4EB;
	}
	.done{
		background-color: white;
		color: #70B5E9;
		text-align: center;
		height: 40px;
		line-height: 40px;
		border: 1px #ebebeb solid;
	}
	.flex{
		display: flex;
	}
	.flex-1{
		flex: 1;
	}
	.howfar{
		text-align: right;
		padding-right: 15px;
	}
	.addr{
		color: black;
	}
	.vux-tab-ink-bar{
		background-color: #71B4EB !important;
	}
</style>